<template>
  <div class="user-edit-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h2>用户信息修改</h2>
        </div>
      </template>

      <!-- 基本信息表单 -->
      <el-form :model="form" label-width="100px">
        <div class="form-columns">
          <div class="form-left">
            <el-form-item label="用户名">
              <el-input v-model="form.name" placeholder="请输入新用户名" />
            </el-form-item>

            <el-form-item label="邮箱">
              <el-input v-model="form.email" type="email" placeholder="请输入新邮箱"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-radio-group v-model="form.gender">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="form-right">
            <el-form-item label="生日">
              <el-date-picker
                  v-model="form.birthday"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
              />
            </el-form-item>

            <el-form-item label="当前密码">
              <el-input
                  v-model="form.currentPassword"
                  type="password"
                  placeholder="请输入当前密码"
              />
            </el-form-item>

            <el-form-item label="新密码">
              <el-input
                  v-model="form.newPassword"
                  type="password"
                  placeholder="请输入新密码"
              />
            </el-form-item>
          </div>
        </div>

        <div class="form-footer">
          <el-button type="primary" size="large">保存修改</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  name: '',
  email: '',
  gender: 'male',
  birthday: '',
  currentPassword: '',
  newPassword: ''
})
</script>

<style>
.user-edit-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.box-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.avatar-upload {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.avatar-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.avatar-uploader .el-avatar {
  border: 2px dashed #dcdfe6;
  margin-bottom: 15px;
}

.upload-tips {
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.upload-tips span {
  display: block;
  margin-bottom: 5px;
}

.form-columns {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.form-left,
.form-right {
  flex: 1;
}

.el-form-item__label {
  color: #606266;
  font-weight: 500;
}

.el-input__inner,
.el-date-editor.el-input {
  width: 100%;
}

.el-radio-group {
  margin-top: 8px;
}

.form-footer {
  margin-top: 30px;
  text-align: center;
}

.el-button--primary {
  width: 200px;
  font-size: 16px;
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .form-columns {
    flex-direction: column;
  }

  .user-edit-container {
    padding: 0 10px;
  }
}
</style>